<template>
    <div class="subpage newbie-guide-container">
        <div class="top-img">
            <img src="https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20190929/15697227079306999.png" alt="">
        </div>
        <div class="newbie-guide-box">
            <div class="newbie-guide-content">
                <div class="title">操作流程演示</div>
                <ul class="newbie-guide-list">
                    <li @click="jumpDetail(1)">
                        <img src="@/assets/img/guide_icon1.png" alt="">
                        <div class="tag-right">
                            <div class="tag-right-left">
                                <p>采购流程</p>
                                <p>点击查看操作流程</p>
                            </div>
                            <van-icon name="arrow" class="arrow-right" />
                        </div>
                    </li>
                    <li @click="jumpDetail(2)">
                        <img src="@/assets/img/guide_icon2.png" alt="">
                        <div class="tag-right">
                            <div class="tag-right-left">
                                <p>转售流程</p>
                                <p>点击查看操作流程</p>
                            </div>
                            <van-icon name="arrow" class="arrow-right" />
                        </div>
                    </li>
                    <li @click="jumpDetail(3)">
                        <img src="@/assets/img/guide_icon3.png" alt="">
                        <div class="tag-right">
                            <div class="tag-right-left">
                                <p>求购流程</p>
                                <p>点击查看操作流程</p>
                            </div>
                            <van-icon name="arrow" class="arrow-right" />
                        </div>
                    </li>
                    <li @click="jumpDetail(4)">
                        <img src="@/assets/img/guide_icon4.png" alt="">
                        <div class="tag-right">
                            <div class="tag-right-left">
                                <p>供货流程</p>
                                <p>点击查看操作流程</p>
                            </div>
                            <van-icon name="arrow" class="arrow-right" />
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <p class="contact">客服电话：400-136-8801</p>
    </div>
</template>

<script>
export default {
    methods: {
        jumpDetail(step) {
            this.$router.push({
                name: 'newbieGuideStep',
                query: {
                    step: step
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .newbie-guide-container {
        background:linear-gradient(180deg,rgba(62,220,147,1) 0%,rgba(58,204,111,1) 100%);
        .top-img {
            width: 100%;
            height: 225px;
            img {
                width: 100%;
                height: 225px;
                object-fit: cover;
            }
        }
        .newbie-guide-box {
            width: 100%;
            margin-top: 10px;
            padding: 0 16px;
            box-sizing: border-box;
            .newbie-guide-content {
                width: 100%;
                padding: 16px 16px 0;
                box-sizing: border-box;
                background-color: #fff;
                box-shadow: 0 2px 10px #13A17E;
                border-radius: 8px;
                .title {
                    margin-bottom: 14px;
                    font-size: 24px;
                    color: #31BC8D;
                    text-align: center;
                }
                .newbie-guide-list {
                    li {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        img {
                            width: 60px;
                            height: 60px;
                            object-fit: cover;
                            margin-right: 15px;
                        }
                        .tag-right {
                            display: flex;
                            flex: 1;
                            justify-content: space-between;
                            align-items: center;
                            padding: 20px 0;
                            box-sizing: border-box;
                            border-bottom: 1px solid #f2f2f2;
                            .tag-right-left {
                                p {
                                    &:first-child {
                                        margin-bottom: 4px;
                                        font-size: 16px;
                                        color: #344047;
                                    }
                                    &:last-child {
                                        font-size: 12px;
                                        color: #969C9E;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .contact {
            padding: 20px 0;
            box-sizing: border-box;
            text-align: center;
            color: #fff;
        }
    }
</style>